<!--  -->
<template>
  <button @click="onClick" class="ScreenButton truncate" :class="active&&'btn-act'">
    <slot></slot>
  </button>
</template>

<script setup lang='ts'>

type Props = {
  active?: boolean
}
withDefaults(defineProps<Props>(), {
  active: false
})

interface Emits {
  (e: 'click'): void
}
const emit = defineEmits<Emits>()
const onClick = () => {
  emit('click',)
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.ScreenButton{
  background: url(@/assets/btn_normal.png);
  background-size: 100% 100%;
  width: 76px;
  height: 26px;
  line-height: 26px;
  color:#5884AF;
  transition: all 0.2s;
}
.btn-act{
  background: url(@/assets/btn_active.png);
   background-size: 100% 100%;
   color:#73FBE0;
}
</style>
